<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    /**
         * 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或重排中完成，
            并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
            由系统决定回调函数的执行时机,不会引起丢帧，不会卡顿
            * 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这就意味着更少的的CPU，GPU和内存使用量
            * 3、requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，
            * 动画会自动暂停，有效节省了CPU开销
            * 
            提高性能： 通过分片渲染，每次只渲染一小部分数据，避免了长时间阻塞主线程，保持了页面的流畅性。
            减少重绘次数： 使用 DocumentFragment 批量添加元素，可以减少 DOM 操作的重绘次数，提高渲染性能。
            平滑用户体验： 数据逐步加载，可以给用户带来更好的体验，避免长时间的白屏或卡顿

            也可以用setTimeout只要不阻塞主线程就可以了
    */

    // 准备数据
    const items = Array.from({ length: 1000 }, (_, index) => `Item ${ index + 1 }`)
    const container = document.getElementById('container')
    const chunkSize = 100 // 每次渲染的数量
    let currentIndex = 0 // 当前索引

    function chunkRender() {
        const fragment = document.createDocumentFragment()
        const end = Math.min(currentIndex + chunkSize, items.length)
        for (let i = currentIndex; i < end; i++) {
            const itemDiv = document.createElement('div')
            itemDiv.className = 'item';
            itemDiv.textContent = items[i];
            fragment.appendChild(itemDiv)
        }
        container.appendChild(fragment)
        currentIndex = end
        if (currentIndex < items.length) {
            requestAnimationFrame(chunkRender);
        }
    }
    chunkRender() 
</script>
<style>
    #container {
      max-width: 600px;
      max-height: 400px;
      overflow-y: auto;
      border: 1px solid #ccc;
    }
    .item {
      height: 30px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      padding: 5px;
    }
  </style>
</html>